<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>重置支付密码</title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui/aui.css" />
    <style>
        .aui-list {
            background-image: none;
        }

        .aui-list.aui-list-in .aui-list-item {
            background-position: 0 bottom;
            padding-left: 0;
            margin: .5rem .75rem 0;
        }

        .aui-list .aui-list-item-inner {
            padding-right: 0.3rem;
        }

        .aui-list .aui-list-item-inner .aui-list-item-input {
            padding-right: 0;
        }

        input {
            text-align: right;
        }

        .get_code {
            width: 12.5rem;
            color: #0689FB;
            text-align: center;
            border: 1px solid #0689FB;
            border-radius: 0.2rem;
            margin-left: .75rem;
        }

        .btn {
            background: #0689FB;
            width: 7rem;
            height: 2rem;
            text-align: center;
            line-height: 2rem;
            color: #fff;
            margin: 3rem auto 0;
            border-radius: 0.2rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="aui-content">
            <ul class="aui-list aui-list-in">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            登录账号
                        </div>
                        <div class="aui-list-item-input">
                            <input type="tel" v-model="info.user_tel" disabled="">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            验证码
                        </div>
                        <div class="aui-list-item-input">
                            <input type="number" placeholder="请输入验证码" v-model="info.captcha">
                        </div>
                        <div class="get_code" onclick="send_code(this)">发送验证码</div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            支付密码
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" placeholder="请输入支付密码" v-model="info.pay_pass">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label">
                            重复密码
                        </div>
                        <div class="aui-list-item-input">
                            <input type="password" placeholder="请再次输入支付密码" v-model="info.pass">
                        </div>
                    </div>
                </li>
            </ul>
            <div @click="submit()" class="btn">提交</div>
        </div>
    </div>
</body>
<script src="../../../script/api.js" charset="utf-8"></script>
<script src="../../../script/common/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="../../../script/common/check.js" charset="utf-8"></script>
<script src="../../../script/common/common.js" charset="utf-8"></script>
<script src="../../../script/common/config.js" charset="utf-8"></script>
<script src="../../../script/common/vue.min.js" charset="utf-8"></script>
<script>
    apiready = function() {
        api.parseTapmode();

        vm.init();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            userInfo: {},
            info: {
                user_id: '',
                user_tel: '',
                captcha: '',
                pay_pass: '',
                pass: ''
            }
        },
        methods: {
            init() {
                this.userInfo = get_local('userInfo');
                this.info.user_id = this.userInfo.user_id;
                this.info.user_tel = this.userInfo.user_tel;
            },
            submit() {
                var that = this;
                if (!is_define(this.info.user_tel)) {
                    $toast("手机号不能为空");
                    return;
                } else if (!checkMobile(this.info.user_tel)) {
                    $toast("请输入正确的手机号码");
                    return;
                } else if (!is_define(this.info.captcha)) {
                    $toast("请输入验证码");
                    return;
                } else if (this.info.captcha.length < 4) {
                    $toast("验证码最少为4位");
                    return;
                } else if (!is_define(this.info.pay_pass)) {
                    $toast("请输入支付密码");
                    return;
                } else if (this.info.pay_pass.length < 6) {
                    $toast("密码最少为6位");
                    return;
                } else if (!is_define(this.info.pass)) {
                    $toast("请再次输入支付密码");
                    return;
                } else if (this.info.pass !== this.info.pay_pass) {
                    $toast("两次密码不一致");
                    return;
                }
                _ajax(Config.api.UserResetPayPass, this.info, function(ret) {
                    if (ret.code === 200) {
                        $toast("修改成功");

                        setTimeout(function(){
                          close_w();
                        }, 1000);
                    } else {
                      $toast(ret.msgs);
                    }
                });
            }
        }
    })

    function send_code(e) {
        if (!checkMobile(vm.info.user_tel)) {
            $toast("请输入正确的手机号码");
            return false;
        }

        _ajax(Config.api.UserSendsmsPayPass, {
            user_tel: vm.info.user_tel
        }, function(ret) {
            if (ret.code === 200) {
                $toast('发送成功');
            } else {
                $toast('发送失败');
            }
        });

        var s = 60;
        $(e).text(s + 's后重新获取');
        $(e).attr("onclick", "");
        var smstime = setInterval(function() {
            s--;
            $(e).text(s + 's后重新获取');
            if (s == 0) {
                clearInterval(smstime);
                $(e).text("获取验证码");
                $(e).attr("onclick", "send_code(this)");
            }
        }, 1000)
    }
</script>

</html>
